<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        min-height: 300px;
        background-color: orange;
        color: #fff;
        font-size: 30px;
      }

      .active {
        color: orangered;
        background-color: yellow;
      }

      .v-enter,
      .v-leave-to {
        opacity: 0;
      }

      .v-enter-active,
      .v-leave-active {
        transition: all 1s;
      }
      .v-enter-to,
      .v-leave {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <!-- vue-router的基本使用 -->
    <div id="app">
      <!-- vue-router 提供了2个组件 router-view / router-link -->

      <!-- router-link会被渲染成a标签 to属性决定路由的跳转地址 -->
      <router-link to="/tech">科技</router-link>
      <router-link to="/game">游戏</router-link>
      <router-link to="/money">财经</router-link>
      <router-link to="/user/1">个人中心</router-link>
      <router-link to="/login">登录</router-link>
      <!-- router-view 占位符 （本质上就是一个动态组件） -->
      <router-view></router-view>
    </div>
    <!-- vue引入 -->
    <script src="./vue.min.js"></script>
    <!-- 引入vue router -->
    <script src="./vue-router.min.js"></script>
    <script>
      const randomComponent = (name, title, children) => ({
        name,
        template: `<div class="box" :style="{backgroundColor: color}">
            <p>{{title}}</p> 

            <div v-if="children && children.length>0">
                <router-link v-for="route in children" :to="route.to">{{route.name}}</router-link>
                <router-view></router-view>
            </div>
          </div>`,
        data() {
          const getRandomColor = () =>
            `rgb(${~~(Math.random() * 255)}, ${~~(Math.random() * 255)}, ${~~(
              Math.random() * 255
            )})`;
          return {
            name,
            title,
            children,
            color: getRandomColor(),
          };
        },
      });

      // 全局变量 用于记录登录状态
      let isLogin = false;

      // 登录所用的组件
      const LoginView = {
        template: `
            <div class="box">
                登录
                <input type="text" v-model="username"/>
                <input type="password" v-model="password"/>
                <button @click="onLogin">登录</button>
            </div>
          `,
        props: ["callback"],
        data() {
          return {
            username: "admin",
            password: "123456",
          };
        },
        methods: {
          onLogin() {
            if (this.username === "admin" && this.password === "123456") {
               isLogin = true;  // 用户名密码正确，就设置登录状态为true
              // this.$router.push(this.$route.query.callback ? this.$route.query.callback: '/')

            //   this.$router.push(this.callback ? this.callback : "/");
            }
          },
        },
        created(){
            console.log(this.$route)
        }
       
      };
      //   1. 写好路由表 数组的形式
      const routes = [
        {
          path: "/",
          redirect: "/tech",
        },
        {
          path: "/tech",
          component: randomComponent("TechCom", "科技板块", [
            { to: "/tech/earth", name: "地球科技" },
            { to: "/tech/alien", name: "外星科技" },
          ]),
          name: "tech",
          redirect: "/tech/earth",
          meta: {
            loginRequired: true
          },
          children: [
            {
              path: "/tech/earth",
              component: randomComponent("EarthTec", "地球科技"),
              name: "earth",
              meta: {
                title: "地球科技",
              },
            },
            {
              path: "/tech/alien",
              component: randomComponent("AlienTec", "外星科技"),
              name: "alien",
              meta: {
                title: "外星科技",
              },
            },
          ],
        },
        {
          path: "/game",
          component: randomComponent("GameCom", "游戏板块"),
          name: "game",
          meta: {
            title: "游戏",
          },
        },
        {
          path: "/money",
          component: randomComponent("MoneyCom", "财经板块"),
          name: "money",
          alias: "/rich",
          meta: {
            title: "财经",
          },
        },
        {
          path: "/login",
          component: LoginView,
          name: "login",
        //   props: (route) => {
        //     return {
        //       callback: route.query.callback,
        //     };
        //   },
          meta: {
            title: "登录",
          },
        },
        {
            // 这个id可以随便写变量名
          path: "/user/:id",
          component: randomComponent("UserCom", "个人中心"),
          name: "user",
          meta: {
            title: "个人中心",
            loginRequired: true, // 该条路由的访问 需要登录权限
          },
        },
        // {
        //   path: "*",   // *  通配符  注意一定要写到最后
        //   component: randomComponent("NotFoundCom", "404"),
        //   name: "notFound",
        //   meta: {
        //     title: "404",
        //   },
        // },
      ];

      //  2. 生成对应的vue-router的实例
      const router = new VueRouter({
        // mode: 'history',   // 默认是hash模式
        routes,
      });

      // 路由变更，进入新的路由之前会被触发
      // 三个参数： to 要跳转的路由对象  from 从那个路由来的， next函数 决定是否进行下一步
      // 前置路由守卫中，next不被执行，路由是不会真正跳转的
      router.beforeEach((to, from, next) => {
        console.log(to);
        // const loginRequired = to.matched.some(item => item.meta.loginRequired)
        // next({ name: "login"});

        // 这里!isLogin为true只是为了让进这个if语句 
        if (to.meta.loginRequired && !isLogin) {
            // 要跳转的路由要求登录权限，并且islogin为false,
          next({ name: "login"});
        //   next({ name: "login", query: { callback: to.path } });
        // 如果进到了if语句，那么就要跳转到login页面，然后就会在进入这个钩子函数
        // 然后这个时候login路由就没有loginRequired的标记了，然后就就执行else，
        // 就直接跳转到login界面了，如果刚开始进来的时候就不满足if，就直接进入else
        } else {
          next();
        }
      });

      // 后置路由守卫
      //  路由跳转完成之后
      //  to/from 同 前置路由守卫  没有next参数
      router.afterEach((to, from) => {
        console.log("路由跳转完成");
        console.log(to);

        document.querySelector("title").innerText = to.meta.title;
      });

      // 3. 创建Vue的根组件实例，把router实例进行注入, 所有的后代组件实例都可以访问的router， vm.$router
      const vm = new Vue({
        el: "#app",
        router,
      });
    </script>
  </body>
</html>